<template>
  <div class="app-container">
    <div class="base">
      <div>

      </div>
      <div class="info-collect-base">
        <div class="material-upload-base">
          <div class="base-title">
            <div class="master-title">
              请上传以下资料
            </div>
            <div class="subtitle">
              图片应文字清洗、边框完整、无反光
            </div>
          </div>
          <div class="material-upload-base-content">
            <div class="upload-yyzz-base material-upload-base-item">
              <div class="concise-item">
                <div class="concise-item-editor">
                  <div class="concise-item-image">
                    <template v-if="infoCollect.yyzzImg">
                      <el-image style="width: 100%; height: 245px" :src="infoCollect.yyzzImg" fit="fill" :lazy="false"/>
                      <BtnSingleImageUpload :is-show-tip='false' v-model="infoCollect.yyzzImg" :limit="1">
                        <div class="concise-item-image-btn">
                          <div class="btn">
                            <div class="icon-upload"></div>
                            <div>换图</div>
                          </div>
                        </div>
                      </BtnSingleImageUpload>
                    </template>
                    <template v-else>
                      <BtnSingleImageUpload :is-show-tip="false" v-model="infoCollect.yyzzImg">
                        <div style="width: 300px; height: 245px; display: flex; justify-content: center; align-items: center;">
                          <p style="text-align: center; color: #2191ff"></p>
                        </div>
                      </BtnSingleImageUpload>
                    </template>
                  </div>
                </div>
              </div>
              <div class="material-upload-base-item-desc">营业执照</div>
            </div>
            <div class="upload-id-card-front-base material-upload-base-item">
              <div class="concise-item">
                <div class="concise-item-editor">
                  <div class="concise-item-image">
                    <template v-if="infoCollect.idCardFrontImg">
                      <el-image style="width: 100%; height: 245px" :src="infoCollect.idCardFrontImg" fit="fill" :lazy="false"/>
                      <BtnSingleImageUpload :is-show-tip='false' v-model="infoCollect.idCardFrontImg" :limit="1">
                        <div class="concise-item-image-btn">
                          <div class="btn">
                            <div class="icon-upload"></div>
                            <div>换图</div>
                          </div>
                        </div>
                      </BtnSingleImageUpload>
                    </template>
                    <template v-else>
                      <BtnSingleImageUpload :is-show-tip="false" v-model="infoCollect.idCardFrontImg">
                        <div style="width: 300px; height: 245px; display: flex; justify-content: center; align-items: center;">
                          <p style="text-align: center; color: #2191ff"></p>
                        </div>
                      </BtnSingleImageUpload>
                    </template>
                  </div>
                </div>
              </div>
              <div class="material-upload-base-item-desc">法人身份证人像面</div>
            </div>
            <div class="upload-id-card-verso-base material-upload-base-item">
              <div class="concise-item">
                <div class="concise-item-editor">
                  <div class="concise-item-image">
                    <template v-if="infoCollect.idCardVersoImg">
                      <el-image style="width: 100%; height: 245px" :src="infoCollect.idCardVersoImg" fit="fill" :lazy="false"/>
                      <BtnSingleImageUpload :is-show-tip='false' v-model="infoCollect.idCardVersoImg" :limit="1">
                        <div class="concise-item-image-btn">
                          <div class="btn">
                            <div class="icon-upload"></div>
                            <div>换图</div>
                          </div>
                        </div>
                      </BtnSingleImageUpload>
                    </template>
                    <template v-else>
                      <BtnSingleImageUpload :is-show-tip="false" v-model="infoCollect.idCardVersoImg">
                        <div style="width: 300px; height: 245px; display: flex; justify-content: center; align-items: center;">
                          <p style="text-align: center; color: #2191ff"></p>
                        </div>
                      </BtnSingleImageUpload>
                    </template>
                  </div>
                </div>
              </div>
              <div class="material-upload-base-item-desc">法人身份证国徽面</div>
            </div>
          </div>
        </div>
        <div class="identify-info-base">
          <el-row>
            <el-col :span="10"><div class="grid-content bg-purple identify-info-gap">
              <span class="info-title">
                企业名称
              </span>
              <el-input style="width: 60%" size="small" v-model="infoCollect.licenseName" placeholder="请输入企业名称！"></el-input>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple-light identify-info-gap">
              <span class="info-title">
                企业信用代码
              </span>
              <el-input style="width: 60%" size="small" v-model="infoCollect.licenseNumber" placeholder="请输入企业信用代码！"></el-input>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"><div class="grid-content bg-purple identify-info-gap">
              <span class="info-title">
                营业执照有效期（起）
              </span>
              <el-date-picker
                style="width: 40%"
                size="small"
                v-model="infoCollect.periodBegin"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间">
              </el-date-picker>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple-light identify-info-gap">
              <span class="info-title">
                营业执照有效期（止）
              </span>
              <el-date-picker
                style="width: 40%"
                size="small"
                v-model="infoCollect.periodEnd"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间">
              </el-date-picker>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"><div class="grid-content bg-purple identify-info-gap">
              <span class="info-title">
                注册地址
              </span>
              <el-input style="width: 60%" size="small" v-model="infoCollect.licenseAddress" placeholder="请输入注册地址！"></el-input>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple-light identify-info-gap">
              <span class="info-title">
                法人姓名
              </span>
              <el-input style="width: 60%" size="small" v-model="infoCollect.legalPerson" placeholder="请输入法人姓名！"></el-input>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"><div class="grid-content bg-purple identify-info-gap">
              <span class="info-title">
                法人是否为最终受益人
              </span>
              <template>
                <el-radio v-model="infoCollect.owner" :label="1">是</el-radio>
                <el-radio v-model="infoCollect.owner" :label="0">否</el-radio>
              </template>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"><div class="grid-content bg-purple identify-info-gap">
              <span class="info-title">
                法人身份证号
              </span>
              <el-input style="width: 60%" size="small" v-model="infoCollect.idCardNumber" placeholder="请输入法人身份证号！"></el-input>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple-light identify-info-gap">
              <span class="info-title">
                身份证居住地
              </span>
              <el-input style="width: 60%" size="small" v-model="infoCollect.idCardAddress" placeholder="请输入身份证居住地！"></el-input>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="10"><div class="grid-content bg-purple identify-info-gap">
              <span class="info-title">
                身份证有效期（起）
              </span>
              <el-date-picker
                style="width: 40%"
                size="small"
                v-model="infoCollect.cardPeriodBegin"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间">
              </el-date-picker>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple-light identify-info-gap">
              <span class="info-title">
                身份证有效期（止）
              </span>
              <el-date-picker
                style="width: 40%"
                size="small"
                v-model="infoCollect.cardPeriodEnd"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间">
              </el-date-picker>
            </div></el-col>
          </el-row>
        </div>
        <div class="merchant-type-base">
          <div class="base-title">
            <div class="master-title">
              商户类别
            </div>
          </div>
          <div class="merchant-type-content">
            <div class="main-body-type-title info-title">
              主体类型
            </div>
            <div class="main-body-type-options">
              <el-select style="width: 100%" size="small" v-model="infoCollect.merchantType" @change="getIndustryList">
                <el-option label="企业" value="SUBJECT_TYPE_ENTERPRISE" />
                <el-option label="个体户" value="SUBJECT_TYPE_INDIVIDUAL" />
              </el-select>
            </div>
            <div class="auth-type-title info-title">
              商户证书类型
            </div>
            <div class="auth-type-options">
              <el-select style="width: 100%" size="small" v-model="infoCollect.certificateType">
                <el-option label="营业执照" value="yyzz" />
                <el-option label="营业执照多合一" value="yyzzs" />
              </el-select>
            </div>
            <div class="industry-type-title info-title">
              行业类别
            </div>
            <div class="industry-type-options">
              <el-select style="width: 100%" size="small" v-model="infoCollect.industryType">
                <el-option
                  v-for="(item,index) of industryDataList"
                  :key="item.id"
                  :value="item.id"
                >{{ (item.mainBodyType === 'SUBJECT_TYPE_ENTERPRISE'? '企业-':'个体户-') + item.industryName }}</el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="back-card-info-base">
          <div class="base-title">
            <div class="master-title info-title">
              银行卡信息
            </div>
            <div class="subtitle">
              仅做商户认证使用，提现账号可另外绑定
            </div>
          </div>
          <div class="back-card-info-content">
            <div class="back-number info-title">
              银行卡号
            </div>
            <div class="back-number-input">
              <el-input size="small" style="width: 100%" v-model="infoCollect.backNumber" placeholder="请输入对公银行卡号"></el-input>
            </div>
            <div class="back-name info-title">
              开户银行
            </div>
            <div class="back-name-select">
              <el-input size="small" style="width: 100%" v-model="infoCollect.backName" placeholder="请选择开户银行" @focus="goSelectBack"></el-input>
            </div>
          </div>
        </div>
        <div class="other-info-base">
          <div class="base-title">
            <div class="master-title">
              其他信息
            </div>
          </div>
          <div class="other-info-content">
            <div class="wx-number-title info-title">
              法人微信号
            </div>
            <div class="wx-number-input">
              <el-input size="small" style="width: 100%" v-model="infoCollect.frWxNumber" placeholder="请输入法人身份证绑定的微信号"></el-input>
            </div>
            <div class="mobile-number-title info-title">
              法人手机号
            </div>
            <div class="mobile-number-input">
              <el-input size="small" style="width: 100%" v-model="infoCollect.frMobileNumber" placeholder="请输入法人手机号"></el-input>
            </div>
            <div class="email-title info-title">
              邮箱
            </div>
            <div class="email-input">
              <el-input size="small" style="width: 100%" v-model="infoCollect.frEmailNumber" placeholder="请输入法人邮箱"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="info-btu">
        <el-button type="primary" @click="checkInfoCollect">下一步</el-button>
      </div>
    </div>
    <el-dialog title="选择开户行" :visible.sync="open" append-to-body>
      <div>
        <el-cascader
          style="width: 30%"
          size="small"
          v-model="backParams.regions"
          :options="regionOptions"
          :props="props"
          :disabled="regiondisabled"
          @change="handleChange">
        </el-cascader>
        <el-input style="width: 25%; padding-left: 15px" size="small" v-model="backParams.backName" placeholder="请输入银行"></el-input>
        <el-input style="width: 25%; padding-left: 15px" size="small" v-model="backParams.keyword" placeholder="请输入关键字"></el-input>
        <span style="padding-left: 15px">
          <el-button type="primary" size="small" @click="backCompareQuery">搜索</el-button>
        </span>
      </div>
      <div v-if="backCompareList.length > 0">
        <el-table :show-header=false :data="backCompareList"
                  highlight-current-row
                  @current-change="handleCurrentChange">
          <el-table-column>
            <template slot-scope="scope">
              <div>联行号：{{ scope.row.interbankNo }}</div>
              <div>{{ scope.row.backName }}</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="backCompareTotal>0"
          :total="backCompareTotal"
          :page.sync="backParams.pageNum"
          :limit.sync="backParams.pageSize"
          @pagination="getBackCompareList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BtnSingleImageUpload from '@/components/BtnSingleImageUpload'
import { regionList } from "@/api/triones/region";
import { backComparePageList, industryList } from "@/api/triones/activityTool";
export default {
  name: "authPromotion",
  components: {BtnSingleImageUpload},
  data() {
    return {
      infoCollect: {
        yyzzImg: '',
        idCardFrontImg: '',
        idCardVersoImg: '',
        licenseName: '',
        licenseNumber: '',
        licenseAddress: '',
        periodBegin: '',
        periodEnd: '',
        legalPerson: '',
        idCardNumber: '',
        idCardAddress: '',
        cardPeriodBegin: '',
        cardPeriodEnd: '',
        merchantType: '',
        certificateType: '',
        industryType: '',
        backNumber: '',
        backName: '',
        interbankNo: '',
        frWxNumber: '',
        frMobileNumber: '',
        frEmailNumber: '',
        bankAddressCode: '',
        owner: ''
      },
      open: false,
      regionOptions: [],
      props: {
        value: 'name',
        label: 'name',
        leaf: 'leaf',
        expandTrigger: 'click',
        multiple: false,
        checkStrictly: false,
        emitPath: true,
        lazy: false
      },
      isShowInfo: true,
      backParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
        backName: undefined,
        regions: []
      },
      regiondisabled: true,
      backCompareTotal: 0,
      backCompareList: [],
      industryDataList: []
    }
  },
  created() {
    this.getIndustryList();
  },
  methods: {
    /** 选择开户银行 */
    goSelectBack() {
      this.getRegionsList();
      this.open = true;
      console.log('xxxxxxx')
    },
    /** 地区列表 */
    getRegionsList() {
      this.regiondisabled = true;
      regionList().then(response => {
        this.regionOptions = [];
        this.regionOptions = this.handleTree(response, "id", "parentId");
        this.regiondisabled = false;
      });
    },
    handleChange(value) {
      console.log('value',value)
    },
    /** 银行对照查询 */
    backCompareQuery() {
      if (this.backParams.regions.length === 0) {
        return this.$message.warning('请先选择省市区！');
      }
      console.log('infoCollect.bankAddressCode',this.infoCollect.bankAddressCode)
      this.getBackCompareList();
    },
    /** 获取银行对照列表 */
    getBackCompareList() {
      backComparePageList(this.backParams).then(response => {
        this.backCompareList = response.rows;
        this.backCompareTotal = response.total;
      })
    },
    /** 获取行业列表 */
    getIndustryList() {
      const params = {
        mainBodyType: this.infoCollect.merchantType
      }
      industryList(params).then(response => {
        this.industryDataList = response.data;
      })
    },
    handleCurrentChange(row) {
      this.infoCollect.backName = row.backName;
      this.infoCollect.interbankNo = row.interbankNo;
      this.open = false;
      this.resetBackParams();
    },
    resetBackParams() {
      this.backParams = {
        pageNum: 1,
          pageSize: 10,
          keyword: undefined,
          backName: undefined,
          regions: []
      };
      this.backCompareList = [];
      this.backCompareTotal = 0;
    },
    /** 重置 */
    resetInfoCollect() {
      this.infoCollect = {
        yyzzImg: '',
        idCardFrontImg: '',
        idCardVersoImg: '',
        licenseName: '',
        licenseNumber: '',
        licenseAddress: '',
        periodBegin: '',
        periodEnd: '',
        legalPerson: '',
        idCardNumber: '',
        idCardAddress: '',
        cardPeriodBegin: '',
        cardPeriodEnd: '',
        merchantType: '',
        certificateType: '',
        industryType: '',
        backNumber: '',
        backName: '',
        interbankNo: '',
        frWxNumber: '',
        frMobileNumber: '',
        frEmailNumber: '',
        bankAddressCode: '',
        owner: ''
      }
    },
    /** 参数检查 */
    checkInfoCollect() {
      if (!this.infoCollect.yyzzImg) {
        return this.$message.warning("营业执照不能为空");
      }
      if (!this.infoCollect.idCardFrontImg) {
        return this.$message.warning("身份证正面照不能为空");
      }
      if (!this.infoCollect.idCardVersoImg) {
        return this.$message.warning("身份证反面照不能为空");
      }
      if (!this.infoCollect.licenseName) {
        return this.$message.warning("企业名称不能为空");
      }
      if (!this.infoCollect.licenseNumber) {
        return this.$message.warning("企业信用代码不能为空");
      }
      if (!this.infoCollect.licenseAddress) {
        return this.$message.warning("注册地址不能为空");
      }
      if (!this.infoCollect.periodBegin) {
        return this.$message.warning("营业执照有效期（起）时间不能为空");
      }
      if (!this.infoCollect.periodEnd) {
        return this.$message.warning("营业执照有效期（止）时间不能为空");
      }
      if (!this.infoCollect.legalPerson) {
        return this.$message.warning("法人姓名不能为空");
      }
      if (!this.infoCollect.owner) {
        return this.$message.warning("法人是否为最终受益人不能为空");
      }
      if (!this.infoCollect.idCardNumber) {
        return this.$message.warning("法人身份证号不能为空");
      }
      if (!this.infoCollect.idCardAddress) {
        return this.$message.warning("身份证居住地不能为空");
      }
      if (!this.infoCollect.cardPeriodBegin) {
        return this.$message.warning("身份证有效期（起）时间不能为空");
      }
      if (!this.infoCollect.cardPeriodEnd) {
        return this.$message.warning("身份证有效期（止）时间不能为空");
      }
      if (!this.infoCollect.merchantType) {
        return this.$message.warning("主体类型不能为空");
      }
      if (!this.infoCollect.certificateType) {
        return this.$message.warning("商户证书类型不能为空");
      }
      if (!this.infoCollect.industryType) {
        return this.$message.warning("行业类别不能为空");
      }
      if (!this.infoCollect.backNumber) {
        return this.$message.warning("银行卡号不能为空");
      }
      if (!this.infoCollect.backName) {
        return this.$message.warning("开户银行不能为空");
      }
      if (!this.infoCollect.interbankNo) {
        return this.$message.warning("银行联行号不能为空");
      }
      if (!this.infoCollect.frWxNumber) {
        return this.$message.warning("法人微信号不能为空");
      }
      if (!this.infoCollect.frMobileNumber) {
        return this.$message.warning("法人手机号不能为空");
      }
      if (!this.infoCollect.frEmailNumber) {
        return this.$message.warning("法人邮箱不能为空");
      }
      if (!this.infoCollect.bankAddressCode) {
        return this.$message.warning("开户银行归属地不能为空");
      }
      this.submit(this.infoCollect);
    },
    /** 认证提交 */
    submit(infoCollect) {
      this.$alert('<div>' +
        '<div>企业名称：'+ infoCollect.licenseName + '</div>' +
        '<div>法人姓名：'+ infoCollect.legalPerson + '</div>' +
        '<div>法人手机号：'+ infoCollect.frMobileNumber + '</div>' +
        '<div>法人微信号：'+ infoCollect.frWxNumber + '</div>' +
        '</div>', '请核对以下信息是否准确！', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认提交',
        showCancelButton: true,
        cancelButtonText: '返回修改'
      }).then(() => {
        this.$message.success('成功了哦');
        this.resetInfoCollect();
      })
    }
  }
}
</script>

<style scoped lang="scss">

.base {
  overflow-x: auto;
}

.info-collect-base {
  .material-upload-base {
    .material-upload-base-title {
      display: flex;
      justify-content: flex-start;
      .material-upload-base-master-title {
      }
      .material-upload-base-subtitle {
      }
    }
    .material-upload-base-content {
      width: 100%;
      display: flex;
      justify-content: start;
      .material-upload-base-item {
        width: 25%;
        min-width: 280px;
        height: 245px;
        margin-right: 20px;
      }
      .upload-yyzz-base {
        background-image: url("../../../assets/images/authPromotion/license_example.png");
        background-size: 100% 100%;
        .material-upload-base-item-desc {
          padding-top: 15px;
          text-align: center;
        }
      }
      .upload-id-card-front-base {
        background-image: url("../../../assets/images/authPromotion/certificate.png");
        background-size: 100% 100%;
        .material-upload-base-item-desc {
          padding-top: 15px;
          text-align: center;
        }
      }
      .upload-id-card-verso-base {
        background-image: url("../../../assets/images/authPromotion/certificate_back.png");
        background-size: 100% 100%;
        .material-upload-base-item-desc {
          padding-top: 15px;
          text-align: center;
        }
      }
    }
  }

  .identify-info-base {
    padding-top: 60px;
  }

  .merchant-type-base {
    padding-top: 50px;
    .merchant-type-content {
      display: flex;
      justify-content: flex-start;
    }
    .main-body-type-title {
      min-width: 60px;
      align-content: center;
    }
    .main-body-type-options {
      padding-left: 10px;
      width: 25%;
      min-width: 230px;
    }
    .auth-type-title {
      min-width: 95px;
      padding-left: 10px;
      align-content: center;
    }
    .auth-type-options {
      padding-left: 10px;
      width: 25%;
      min-width: 230px;
    }
    .industry-type-title {
      min-width: 70px;
      padding-left: 10px;
      align-content: center;
    }
    .industry-type-options {
      padding-left: 10px;
      width: 25%;
      min-width: 230px;
    }
  }

  .back-card-info-base {
    padding-top: 50px;
    .back-card-info-content {
      display: flex;
      justify-content: flex-start;
      .back-number {
        min-width: 50px;
        align-content: center;
      }
      .back-number-input {
        padding-left: 10px;
        width: 25%;
        min-width: 230px;
      }
      .back-name {
        padding-left: 10px;
        min-width: 50px;
        align-content: center;
      }
      .back-name-select {
        padding-left: 10px;
        width: 25%;
        min-width: 230px;
      }
    }
  }

  .other-info-base {
    padding-top: 50px;
    padding-bottom: 40px;
    .other-info-content {
      display: flex;
      justify-content: flex-start;
      .wx-number-title {
        min-width: 70px;
        align-content: center;
      }
      .wx-number-input {
        padding-left: 10px;
        width: 25%;
        min-width: 230px;
      }
      .mobile-number-title {
        padding-left: 10px;
        min-width: 80px;
        align-content: center;
      }
      .mobile-number-input {
        padding-left: 10px;
        width: 25%;
        min-width: 230px;
      }
      .email-title {
        padding-left: 10px;
        min-width: 40px;
        align-content: center;
      }
      .email-input {
        padding-left: 10px;
        width: 25%;
        min-width: 230px;
      }
    }
  }
}

.info-btu {
  text-align: center;
}

.base-title {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 15px;
  .master-title {
    font-size: 18px;
    font-weight: bold;
  }
  .subtitle {
    font-size: 15px;
    color: red;
    align-content: center;
    padding-left: 10px;
  }
}

.info-title {
  font-size: 14px;
}

.identify-info-gap {
  padding-bottom: 20px;
}

.concise-item {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  .concise-item-editor {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    .concise-item-image {
      position: relative;
    }
  }
  .concise-item-image-btn {
    position: absolute;
    bottom: 7px;
    right: 12px;
    display: flex;
    z-index: 1;
    .btn {
      position: relative;
      display: flex;
      align-items: center;
      line-height: 36px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      border-radius: 3px;
      background: rgba(73, 73, 73, .6);
      padding: 0 10px;
      cursor: pointer;
      box-sizing: border-box;

      .icon-upload {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-position: 50%;
        background-image: url('~@/assets/images/activity/icon_upload.png');
        background-size: contain;
        margin-right: 6px;
      }
    }
  }
}

</style>
